<template>
	<view class="order-detail">
		<NavBar :title="getOrderType.title" :isBack="true"></NavBar>
		<view class="content">
			<view class="header-area">
				<view class="goods-state">
					<image :src="getOrderType.icon"></image>
					<view>
						<view class="title">{{ getOrderType.name }}</view>
						<view v-if="detail.status == 0">{{ time }}</view>
						<view v-if="detail.status == 1">商家正在打包中</view>
					</view>
				</view>
				<view class="user-msg">
					<view class="user">
						<view>
							<image src="@/static/icons/location.png"></image>
						</view>
						<view class="name">{{ detail.address?.name || '暂无地址' }} </view>
						{{ detail.address?.mobile }}
					</view>
					<view class="location">
						<view>
							<image src="@/static/order/flag.png"></image>
						</view>
						服务点：{{ detail.servers?.title || '暂无地址' }}
					</view>
				</view>
				<view class="operate">
					<view>
						<image src="@/static/icons/location.png"></image>
						导航
					</view>
					<view @click="callIphone(detail.servers?.mobile)">
						<image src="@/static/icons/tell.png"></image>
						电话
					</view>
				</view>
			</view>
			<view class="middle-area">
				<view class="goods-details">
					<view class="title">
						<image src="@/static/order/goods.png"></image>
						{{ detail.servers?.title }}
					</view>
					<view class="goods-msg">
						<view>
							<image :src="detail.shops?.cover"></image>
						</view>
						<view>
							<view class="row">
								<view>{{ detail.shops.title }}</view>
								<view class="num">x{{ detail.num }}</view>
							</view>
							<view>卜公英（方形）30g玻璃瓶【买1送1】</view>
							<view class="price">¥ {{ detail.shops?.price }}</view>
						</view>
					</view>
					<view class="order-msg">
						<view class="row">
							<view>配送方式</view>
							<view>免运费，快递发货</view>
						</view>
						<view class="row">
							<view>订单备注</view>
							<view>无</view>
						</view>
						<view class="row">
							<view>订单编号</view>
							<view>{{ detail.orderid }}</view>
						</view>
						<view class="row">
							<view>创建时间</view>
							<view>{{ timestampToTime(detail.create_time) }}</view>
						</view>
					</view>
				</view>
				<view class="goods-price-msg">
					<view class="row">
						<view>商品金额</view>
						<view class="thick">¥{{ detail.shops.price }}</view>
					</view>
					<view class="row">
						<view>运费</view>
						<view class="thick">¥0.00</view>
					</view>
					<view class="row">
						<view>应付金额</view>
						<view class="thick">¥{{ detail.paymoney }}</view>
					</view>
				</view>
			</view>
			<view class="footer-area">
				<view class="non-payment" v-if="!orderType">
					<view class="total">
						<view>
							合计：
						</view>
						<view>
							<view class="price">¥ {{ detail.paymoney }}</view>
							<view class="freight">包含运费¥0.00</view>
						</view>
					</view>
					<view class="btn">
						<view class="public-btn-style" @click="handleCancelPay">取消支付</view>
						<view class="payment" @click="handlePay">付款</view>
					</view>
				</view>
				<view class="btn" v-else>
					<view class="public-btn-style" @click="$gotoUrl('/pages/order/afterServices?id=' + detail.id)">申请售后</view>
					<view class="public-btn-style" v-if="orderType == 2">确认收货</view>
					<!-- <view class="public-btn-style cancel-mr" v-if="orderType != 3">更改服务点</view> -->
					<view class="public-btn-style cancel-mr" v-if="orderType == 3"
						@click="$gotoUrl('/pages/index/goodDetail?id=' + detail.shops?.id)">再来一单</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import { reactive, computed, toRefs, onUnmounted } from 'vue'
import { getOrderItem, orderCancel, orderCotinuePay } from '@/api/order'
import { onLoad } from '@dcloudio/uni-app'
import { timestampToTime } from '@/common/index.js'

const state = reactive({
	time: "",
	detail: {
		servers: {},
		shops: {}
	},
	orderType: 1,// 0待付款、1待发货、2待收货、3已完成
	orderTypeList: [
		{
			type: 0,
			title: "待付款",
			name: "等待买家付款",
			icon: "/static/order/wallet.png"
		},
		{
			type: 1,
			title: "待发货",
			name: "等待卖家发货",
			icon: "/static/order/box.png"
		},
		{
			type: 2,
			title: "待收货",
			name: "等待买家收货",
			icon: "/static/order/depart.png"
		}, {
			type: 3,
			title: "已完成",
			name: "您的订单已完成",
			icon: "/static/order/accomplish.png"
		}, {
			type: 4,
			title: "已关闭",
			name: "您的订单已超时关闭",
			icon: "/static/order/accomplish.png"
		}, {
			type: 6,
			title: "退款中",
			name: "您的订单退款审核中",
			icon: "/static/order/accomplish.png"
		}
	]
})
const getOrderType = computed(() => {
	return state.orderTypeList.find(item => item.type == state.orderType) || {}
})
//获取详情
async function getOrderItemData (id) {
	const res = await getOrderItem({ id })
	if (res.data) {
		state.detail = res.data
		state.orderType = res.data.status
		//倒计时
		startCountdown()
	} else {
		uni.navigateBack()
	}

}
//取消支付
function handleCancelPay () {
	uni.showModal({
		title: '提示',
		content: '你确定要取消支付吗',
		success: async function (res) {
			if (res.confirm) {
				await orderCancel({ id: state.detail.id })
				uni.showToast({ title: "操作成功" })
				uni.navigateBack()
			} else if (res.cancel) {
				console.log('取消');
			}
		}
	});
}
//继续支付
async function handlePay () {
	orderCotinuePay({ id: state.detail.id }).then(res => {
		uni.requestPayment({
			"provider": "wxpay",	//支付方式  
			"timeStamp": res.data.timestamp,	//时间戳
			"signType": res.data.signType,	//签名算法，需要与后台下单时一致
			"paySign": res.data.paySign, //签名
			"nonceStr": res.data.nonceStr,	//随机字符串
			"package": res.data.package,	//接口返回的prepay_id
			success: function (resSuccess) {
				console.log("🚀 ~ payWx ~ resSuccess:", resSuccess)
			},

			fail: function (err) {
				console.log("🚀 ~ payWx ~ err:", err)
			}
		});
	})
}
//调起电话
function callIphone (phoneNumber) {
	uni.makePhoneCall({
		phoneNumber: phoneNumber
	})
}
//倒计时
let timer = null
function startCountdown () {
	timer = setInterval(() => {
		const now = new Date().getTime();
		const endtime = (state.detail.overtime * 1000)
		let distance = endtime - now;
		// 计算时间  
		if (distance > 0) {
			const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			const seconds = Math.floor((distance % (1000 * 60)) / 1000);
			state.time = `${minutes}分${seconds < 10 ? '0' + seconds : seconds}秒内付款，超时订单将自动关闭`;
		} else {
			state.time = `付款时间超时，订单已关闭`;
			clearInterval(timer)
		}
	}, 1000);
}
//离开销毁
onUnmounted(() => {
	clearInterval(timer)
})
onLoad((e) => {
	getOrderItemData(e.id)
})
const { orderType, detail, time } = toRefs(state)
</script>

<style lang="scss" scoped>
.order-detail {
	.content {
		position: relative;
		top: -45rpx;
		padding: 36rpx 36rpx 200rpx;

		.header-area {
			padding: 36rpx;
			width: 678rpx;
			height: 458rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			box-sizing: border-box;
			margin-bottom: 36rpx;

			.goods-state {
				padding: 34rpx 36rpx;
				display: flex;
				align-items: center;
				width: 606rpx;
				height: 148rpx;
				border: 1rpx solid #58DBCF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
				margin-bottom: 30rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 22rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #58DBCF;
					margin-bottom: 4rpx;
				}
			}

			.user-msg {
				font-weight: bold;
				font-size: 26rpx;
				color: #333333;

				.user,
				.location {
					display: flex;
				}

				.user {
					image {
						width: 27rpx;
						height: 32rpx;
						margin: 0rpx 20rpx 30rpx 0rpx;
					}

					.name {
						margin-right: 16rpx;
					}
				}

				.location {
					image {
						width: 29rpx;
						height: 29rpx;
						margin-right: 19rpx;
					}
				}
			}

			.operate {
				display: flex;
				align-items: center;
				margin: 24rpx 0rpx 0rpx 45rpx;

				view:first-child {
					margin-right: 36rpx;
				}

				view {
					width: 120rpx;
					height: 44rpx;
					border-radius: 55rpx 55rpx 55rpx 55rpx;
					border: 1rpx solid #58DBCF;
					font-weight: 500;
					font-size: 20rpx;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 23rpx;
						height: 28rpx;
						margin-right: 11rpx;
					}
				}
			}
		}

		.middle-area {

			.goods-details {
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				padding: 36rpx;
				background: #FFFFFF;
			}

			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				display: flex;
				align-items: center;
				margin-bottom: 27rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 14rpx;
				}
			}

			.goods-msg {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;

				.row {
					display: flex;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 8rpx;

					.num {
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						margin-left: 47rpx;
					}
				}

				.price {
					font-weight: 800;
					font-size: 30rpx;
					color: #333333;
					margin-top: 40rpx;
				}

				image {
					width: 155rpx;
					height: 155rpx;
					margin-right: 24rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}

			.order-msg {
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-top: 36rpx;
				}
			}

			.goods-price-msg {
				box-sizing: border-box;
				margin-top: 36rpx;
				padding: 36rpx;
				width: 678rpx;
				height: 245rpx;
				background: #FFFFFF;
				border-radius: 22rpx 22rpx 22rpx 22rpx;

				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-bottom: 36rpx;

					.thick {
						font-weight: 800;
						font-size: 24rpx;
						color: #333333;
					}
				}

				.row:last-child {
					margin-bottom: 0rpx;
				}
			}
		}

		.footer-area {
			position: fixed;
			left: 0rpx;
			right: 0rpx;
			bottom: 0rpx;
			height: 150rpx;
			background: #FFFFFF;
			padding: 18rpx 36rpx;
			box-sizing: border-box;
			white-space: nowrap;

			.non-payment {
				display: flex;
				justify-content: space-between;
			}


			.total {
				display: flex;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;

				.price {
					font-weight: 800;
					font-size: 32rpx;
					color: #FF0000;
				}

				.freight {
					font-weight: 500;
					font-size: 16rpx;
					color: #FF0000;
				}
			}

			.btn {
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				margin-left: 16rpx;

				view {
					padding: 12rpx 36rpx;
					border-radius: 500rpx;
					font-weight: 800;
					font-size: 30rpx;

				}

				.payment {
					color: #FFFFFF;
					background: #58DBCF;
				}

				.public-btn-style {
					color: #58DBCF;
					padding: 12rpx 36rpx;
					border-radius: 500rpx;
					border: 1rpx solid #58DBCF;
					margin-right: 30rpx;

				}

				.cancel-mr {
					margin-right: 0rpx;
				}
			}
		}
	}
}
</style>